<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- {{a}}
			{{b}}
			<br>
			{{msg}}
			<p v-html="msg">会显示一些消息</p>
			<p v-text="msg"></p>
			<p style="font-size: 20px;">{{msg}}</p>
			<p v-if="flag">v-if</p>
			<a v-bind:a="url" v-bind:title="msg" v-bind:href="url">超链接</a>
			<p  v-bind:style="cssa">style v-bind</p>
			<a v-bind:href="id+'.html'">url</a>
			<span v-if="!true">iftrue</span>
			<span v-else-if="flag">123</span>
			<span v-else>ifelse</span>
			<span v-show="!true">v-show</span> -->
			
			<!-- <p v-if="!true">v-if</p>
			<p v-show="!true">v-show</p> -->
			<!-- {{student}}
			<table border="1">
				<tr>
					<td>id</td>
					<td>name</td>
				</tr>
				<tr>
					<td>{{student.id}}</td>
					<td>{{student.name}}</td>
				</tr>
			</table> -->
			<!-- <p :a="student.name"></p>
			<ul>
				<li v-for="(num,index) in nums" :key="index">
					{{num}}--{{index}}
				</li>
			</ul>
			<ul>
				<li v-for="(value,key,a) in student" :key="a">
					{{value}}--{{key}}--{{a}}
				</li>
			</ul>
			<ul>
				<li v-for="(student,index) in students">
					{{student.id}}--{{student.name}}
					<br>
				</li>
			</ul> -->
			<button type="button" v-on:click="save">按钮</button>
			
			<button type="button" @click="save()">按钮2</button>
		</div>
	</body>
	<script type="text/javascript">
		save = function(){
			alert(123)
		}
	
		new Vue({
			el:"#app",
			data:{
				nums:[1,2,3,4,5,6],
				student:{
					id:1,
					name:"张三"
				},
				students:[
					{
						id:1,
						name:"张三"
					},
					{
						id:2,
						name:"王五"
					},
					{
						id:3,
						name:"赵六"
					}
				]
				/* id:1,
				attName:"b",
				cssa:"color:red",
				url:"http://www.baidu.com",
				flag:false,
				a:"A",
				b:"B",
				msg:"<font color='red'>错误消息</font>" */
			},
			methods:{
				save(){
					console.log("Save...")
				}
			},
			beforeCreate() {
				console.log("beforeCreate...",this.a)
			},
			created() {
				console.log("created...",this.a)
			},
			beforeMount() {
				console.log("beforeMount...",this.a)
			},
			mounted() {
				console.log("mounted...",this.a)
			},
			beforeUpdate() {
				console.log("beforeUpdate...",this.a)
			},
			updated() {
				console.log("updated...",this.a)
			}
		})
	</script>
</html>
